<template>
  <div class="image-container">
    <img v-if="isPdf(realSrc) && !realSrc.includes('mp4')" :style="`width:${realWidth};height:${realHeight};`" src="@/assets/images/icon_pdf.png"
      alt="">
    <div class="download" v-if="isPdf(realSrc) && !realSrc.includes('mp4')" @click="pdfLook(realSrc)">预览</div>
    <el-image v-if="!isPdf(realSrc) && !realSrc.includes('mp4')" :src="`${realSrc}?x-oss-process=image/resize,w_300`" fit="cover"
      :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList" preview-teleported>
      <template #error>
        <div class="image-slot">
          <el-icon><picture-filled /></el-icon>
        </div>
      </template>
    </el-image>
    <video controls v-if="realSrc.includes('mp4')">
      <source :src="realSrc" type="video/mp4">
      <source :src="realSrc" type="video/wmv">
      <source :src="realSrc" type="video/flv">
    </video>
  </div>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';

const props = defineProps({
  src: propTypes.string.def(''),
  width: {
    type: [Number, String],
    default: ''
  },
  height: {
    type: [Number, String],
    default: ''
  }
});

const realSrc = ref<string | null>('');
const realSrcList = ref<string[]>([]);
watch(() => props.src, (newVal) => {
  fetchRealSrc()
});
const fetchRealSrc = async () => {
  if (!props.src) {
    realSrc.value = ''
    return;
  }
  try {
    if (props.src) {
      let real_src_list = props.src.split(',');
      realSrc.value = import.meta.env.VITE_APP_PIC_URL + real_src_list[0]; // 更新 realSrc 的值

      realSrcList.value = []
      real_src_list.forEach(async (item) => {
        if (item) {
          realSrcList.value.push(import.meta.env.VITE_APP_PIC_URL + item);
        }
      });
    }
  } catch (error) {
    console.error('获取图片失败', error);
  }
};



const realWidth = computed(() => (typeof props.width == 'string' ? props.width : `${props.width}px`));

const realHeight = computed(() => (typeof props.height == 'string' ? props.height : `${props.height}px`));
const isPdf = (url: string | null) => {
  if (url) {
    return url.includes('.pdf')
  } else {
    return false
  }
}
const pdfLook = (url: string | null) => {
  if (url) {
    window.open(import.meta.env.VITE_APP_PREVIEW_URL + url.split(import.meta.env.VITE_APP_PIC_URL)[1], '_blank');
  }
}
onMounted(async () => {
  fetchRealSrc();
});
</script>

<style lang="scss" scoped>
.image-container {
  position: relative;

  .download {
    font-size: 12px;
    color: #109aff;
    position: absolute;
    right: 8px;
    bottom: 8px;
    cursor: pointer;
  }
}
video{
  width: 50px;
  height: 50px;
}

.el-image {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;

  :deep(.el-image__inner) {
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      transform: scale(1.2);
    }
  }

  :deep(.image-slot) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}
</style>
